<template>
         <div class="volume_progress"
         @mouseup="onMouseUp"
         @mouseleave="onMouseUp"
         >
                <div class="volume_progress_line" ref="clineRefs"
                @mousemove="onMouvesHandle"  

                >
                  <div></div>
                </div>
                <div class="volume_progress_bar" ref="cbarRefs"
               
                @mousedown="onMouseDown" 
                ></div>
        </div>
</template> 
<script lang="ts" setup>
 
import {ref,defineEmits} from 'vue';
const clineRefs = ref(); 
const cbarRefs = ref();
const iskey = ref(false);
const emits = defineEmits(['valueNums'])


const onMouvesHandle = (e)=>{
    if(iskey.value){
        updataStyles(e.offsetY)
    }
    //   cbarRefs
   
}

const onMouseUp = (e)=>{
    iskey.value=false;
    e.preventDefault();
}

const onMouseDown = (e)=>{
    e.preventDefault();
   
    iskey.value=true;
}


const updataStyles = (e)=>{
     Object.assign(cbarRefs.value.style ?? {},{
        transform:`translateY(${e}px)`
     })
     const {height} = clineRefs.value.getBoundingClientRect();
     let lists = e/height;
     emits('valueNums',lists);
}







</script>